<template>
  <div class="width100 tw-h-90">
    <span style="font-size: 24px;font-weight: 700;color: #171920;line-height: 90px">{{ '为什么选择我们' }}</span>
  </div>
  <div class="flex-start-center">
    <div v-for="(item,index) in data.welcomeList.slice(0,4)" :style="index < 3? 'margin-right: 20px' : ''">
      <el-card shadow="hover" class="click" style="position: relative;width: 280px;height: 340px">
        <div  class="welcome-top" :style="{borderBottomColor:data.colorList[index]}" ></div>
        <div style="margin: 52px 19px 30px 28px;font-weight: 700;font-size: 20px;color: #171920;width: fit-content;">{{ item.title }}</div>
        <div style="padding: 0px 28px 0 28px;font-weight: 400;font-size: 14px;color: #9598a2;word-break: break-word">
          {{ item.content }}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive} from "vue";
import {useRoute, useRouter} from 'vue-router';
import {listWelcome} from '../../api/home.js'

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const data = reactive({
  welcomeList:[],
  colorList:['#4D82FF','#6E4DFF','#2ADB2A','#F9C829']
})
function initData() {
  listWelcome({},(res) => {
    data.welcomeList = res.data
  })
}

onMounted(()=>{
  initData()
})

</script>
<style lang="scss" scoped>
.el-card {
  --el-card-border-radius: none
}
.el-card:hover {
  transform: translateY(-5px)
}
.welcome-top{
  margin-left: 28px;
  margin-top: -4px;
  border-radius: 6px;
  border-bottom: 8px solid #6E4DFF;
  width: 80px;
}
</style>
